
<script setup>
import {ref} from 'vue';
const course_num=ref('11474');
const class_num=ref('9424');
const chapter_num= ref('317635');
const teacher_num=ref('10540');
const students_num=ref('34731');
const resources_num= ref('7395483168');
const resources_hour= ref('2054300');
// const resources_topic_num= ref('883914');
const resources_note_num= ref('1138959');


</script>


<template>
  <div>
    <h3 class="head">平台基本信息</h3>

    <el-descriptions class="margin-top" :column="1" :size="size" border>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item" style="color:black">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            课程总数
          </div>
        </template>
        {{ course_num }} 节
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item" style="color:black">
            <el-icon :style="iconStyle">
              <GoldMedal />
            </el-icon>
            班级总数
          </div>
        </template>
        {{ class_num }} 个
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item" style="color:black">
            <el-icon :style="iconStyle">
              <School />
            </el-icon>
            章节总数
          </div>
        </template>
        {{ chapter_num }} 节
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item" style="color:black">
            <el-icon :style="iconStyle">
              <EditPen />
            </el-icon>
            老师数量
          </div>
        </template>
        {{ teacher_num }} 名
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item" style="color:black">
            <el-icon :style="iconStyle">
              <DataAnalysis />
            </el-icon>
            学生数量
          </div>
        </template>
        {{ students_num }} 位
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item" style="color:black">
            <el-icon :style="iconStyle">
              <DataAnalysis />
            </el-icon>
            资源数量
          </div>
        </template>
        {{ resources_num }} 条
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item" style="color:black">
            <el-icon :style="iconStyle">
              <DataAnalysis />
            </el-icon>
            总计学习时长
          </div>
        </template>
        {{ resources_hour }} 小时
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item" style="color:black">
            <el-icon :style="iconStyle">
              <DataAnalysis />
            </el-icon>
            笔记数
          </div>
        </template>
        {{ resources_note_num}} 条
      </el-descriptions-item>

      <!-- <el-descriptions-item>
        <template #label>
          <div class="cell-item" style="color:black">
            <el-icon :style="iconStyle">
              <DataAnalysis />
            </el-icon>
            笔记数
          </div>
        </template>
        {{ resources_note_num }} 条
      </el-descriptions-item> -->

    </el-descriptions>
  </div>
</template>
  
  <style scoped>

  /* .el-descriptions {
      margin-top: 20px;
    } */

  .cell-item {
    display: flex;
    align-items: center;
  }

  /* .cell-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

.el-descriptions {
  max-height: 90%;
  overflow-y: auto; 
 竖直方向超出容器时显示滚动条 
}*/ 
/* 失败的尝试，想要把信息放多一点 */


</style>